<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Block Box Model</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
        <!--[if lte IE 6]>
        <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
        <![endif]-->
    </head>

    <body>
        <h1>Box Model</h1>

        <div id="main_div">
            <p id="test_para">if you change the CSS position to static, the color box will be messed up!</p>
            <!-- this is dumb! there MUST be a better way
            if you add the style: "html * {border:1px solid black;}" you'll know what I mean, but the next <div>'s only purpose
            is draw the box, which seems dumb.
            -->
            <div class="box"></div>


            <!-- ==========================================
             Code for creating labels and extra borders 
             ========================================== -->
            <div id="outer_box" ></div>

            <span id="outer_lbl"     class="box_label"       >Outer Box</span>
            <span id="margin_lbl"    class="box_label"       >Margin   </span>
            <span id="border_lbl"    class="box_label" >Border   </span>
            <span id="padding_lbl"   class="box_label"       >Padding  </span>
            <span id="inner_lbl"     class="box_label"       >Inner Box</span>
            <span id="content_lbl"   class="box_label"       ><br />
                <br />
                &uarr;<br />
                Top<br />
                &larr; Left &nbsp; &nbsp; &nbsp;Right &rarr;<br />
                Bottom<br />
                &darr;
            </span>
            <div class="position_test">
                <p id="test_pos_1">testing position #1</p>
                <p id="test_pos_2">testing position #2</p>
            </div>
        </div>
        <p>Just checking...</p>
        <p>did you know that the spacing between every block like <code>&lt;p&gt;</code> is equivalent to its box size?</p>

    </body>
</html>
